<template>
    <div>
        <el-table :data="group_list">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table :data="props.row.children">
                        <el-table-column label="项目名称" prop="projectName" width="120"></el-table-column>
                        <el-table-column label="项目编号" prop="id"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="delProjectOutOfGroup(props.row.id, scope.row.id)">
                                    <i class="el-icon-delete text-danger"></i>删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="群名称" prop="groupName" width="120"></el-table-column>
            <el-table-column label="群编号" prop="id"></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editGroup(scope.row)">
                        <i class="el-icon-edit-outline text-blue"></i>编辑
                    </el-button>
                    <el-button size="mini" @click="addProjectIntoGroup(scope.row.id)">
                        <i class="el-icon-zoom-in text-blue"></i>添加
                    </el-button>
                    <el-button size="mini" @click="disbandGroup(scope.row.id)">
                        <i class="el-icon-delete text-danger"></i>解散群
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <edit-group :data="edit_data" :is_edit_group_form_show.sync="is_edit_group_form_show"></edit-group>
        <add-project-dialog :is_add_project_form_show.sync="is_add_project_form_show" :id="group_id"></add-project-dialog>
    </div>
</template>

<script>
import group from "@/api/group.js";
import { mapGetters } from "vuex";

import EditGroup from "./edit.vue";
import AddProjectDialog from "./add_project.vue"

export default {
    name: "group-table",
    components: {
        EditGroup,
        AddProjectDialog
    },
    computed: {
        ...mapGetters("group", ["group_list"])
    },
    data() {
        return {
            is_edit_group_form_show: false,
            edit_data: undefined,
            is_add_project_form_show: false,
            group_id: undefined
        };
    },
    methods: {
        addProjectIntoGroup(id) {
            this.group_id = id;
            this.is_add_project_form_show = true;
        },
        editGroup(data) {
            this.is_edit_group_form_show = true;
            group.getGroupDetail({id: data.id}).then(res => {
                this.edit_data = res;
            });
        },
        disbandGroup(id) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    group
                        .disbandGroup({ id: id })
                        .then(res => {
                            this.$message({
                                type: "success",
                                message: "解散成功!"
                            });
                            this.$store.dispatch("group/getGroupList");
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        delProjectOutOfGroup(groupId, projectId) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    group
                        .removeProjectOutOfGroup({
                            id: groupId,
                            projectId: projectId
                        })
                        .then(res => {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.$store.dispatch("group/getGroupList");
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        }
    },
    mounted() {
        this.$store.dispatch("group/getGroupList");
    }
};
</script>

<style>
</style>
